<#import "../common/layout.ftl" as layout/>
<#import "../common/dataTables.ftl" as dataTables/>
<#import "../common/modern-forms.ftl" as mform/>
<#import "../common/modal.ftl" as modal/>


<!DOCTYPE html>
<html>
<@layout.head title="趋势分析">
    <@dataTables.head/>
    <@dataTables.buttons_head/>
    <@dataTables.select_head/>
    <@dataTables.fixedHeader_head/>
    <@mform.head/>
    <@select.head/>

    <script type="text/javascript" src="${request.contextPath}/assets/echarts/echarts.min.js?v=3553060703"></script>
</@layout.head>
<body>
<@layout.page>
<div class="main-box">
    <div class="content">
        <div style="width:100%;display: flex;">
            <div style="flex: 1;position: relative">
                <div style="position: relative;top:80px;">
                    <@dataTables.commonTable id="mainTable"/>
                </div>
            </div>
            <div style="flex: 2;position: relative">
                <div id="drawChart" style="width: 700px;height: 300px;top:20px;margin-left: 10px"></div>
            </div>
        </div>
        <div id="searchGroup" class="btn-group" style="position: absolute;top:0px;">
            <select class='form-control' id='custPerson'
                    style='width:200px;float:left;margin-right:3px'>
                <option value="0">选择客户</option>
                <#list custPerson as item>
                    <option value="${item.id?c}">${item.name}</option>
                </#list>
            </select>
            <select class='form-control' id='oneCode'
                    style='width:200px;float:left;margin-right:3px'>
                <option value="0">资产分类</option>
                <#list type as item>
                    <option value="${item.code}">${item.name}</option>
                </#list>
            </select>
            <select class='form-control' id='brandCode'
                    style='width:200px;float:left;margin-right:3px'>
                <option value="0">资产品牌</option>
                <#list brand as item>
                    <option value="${item.code}">${item.name}</option>
                </#list>
            </select>
            <select class='form-control' id='model'
                    style='width:330px;float:left;margin-right:3px'>
                <option value="0">资产型号</option>
            </select>
            <select class='form-control' id='question'
                    style='width:200px;float:left;margin-right:3px'>
                <option value="0">问题类型</option>
                <#list question as item>
                    <option value="${item.code}">${item.name}</option>
                </#list>
            </select>
            <select class='form-control' id='compTableType'
                    style='width:100px;float:left;margin-right:3px'>
                <option value='1'>日趋势</option>
                <option value='2'>月趋势</option>
            </select>
        </div>
        <div>
            <div style="position: absolute;top: 50px">
                <span>新增时间</span>
                <input id="startdate" name="startdate" style="width: 120px" placeholder='请选择开始日期'/>
                <span>至</span>
                <input id="enddate" name="enddate" style="width: 120px" placeholder='请选择结束日期'/>
                <button id="btnAddTopMenu" type="button" class="btn btn-blue btn-sm" style="margin-left: 5px;"
                        onclick="javascript:refreshData();">
                    <i class="fa fa-search"></i> 开始对比
                </button>

            </div>
       </div>
    </div>
</@layout.page>
<@layout.foot>
    <@dataTables.foot/>
    <@dataTables.buttons_foot/>
    <@dataTables.select_foot/>
    <@dataTables.fixedHeader_foot/>
    <@mform.foot/>
    <script src="${request.contextPath}/assets/js/jquery.serializejson.min.js?v=3653060703"></script>
    <script type="text/javascript">
        var now = new Date();
        var begin = now.getFullYear() + "-" + (now.getMonth() + 1) + "-1";
        var endD;
        var nextMonth = now.getMonth() + 1;
        var nextMonthFirstDay = new Date(now.getFullYear(), nextMonth, 1);
        var oneDay = 1000 * 60 * 60 * 24;
        endD = new Date(nextMonthFirstDay - oneDay);
        var end = endD.getFullYear() + "-" + (endD.getMonth() + 1) + "-" + endD.getDate();
        //    if(now.getMonth()!=11)
        //        end= now.getFullYear() + "-" + (now.getMonth() + 2) + "-1";
        //    else
        //        end= (now.getFullYear()+1) + "-1-1";
        $("#startdate").datetimepicker({
            language: "zh-CN",
            startView: 2,
            minView: 2,
            format: "yyyy-mm-dd",
            autoclose: true,
            initialDate: new Date(),
            todayBtn: true
        });
        $("#startdate").val(begin);
        $("#enddate").datetimepicker({
            language: "zh-CN",
            startView: 2,
            minView: 2,
            format: "yyyy-mm-dd",
            autoclose: true,
            todayBtn: true
        });
        $("#enddate").val(end);
        $("#startdate1").datetimepicker({
            language: "zh-CN",
            startView: 2,
            minView: 2,
            format: "yyyy-mm-dd",
            autoclose: true,
            initialDate: new Date(),
            todayBtn: true
        });
        $("#startdate1").val(begin);
        $("#enddate1").datetimepicker({
            language: "zh-CN",
            startView: 2,
            minView: 2,
            format: "yyyy-mm-dd",
            autoclose: true,
            todayBtn: true
        });
        $("#enddate1").val(end);
        var state = {
            <#list state as item>
                "${item.code}": "${item.name}",
            </#list>}
        var columns = [
            {"sWidth": "100px", "title": "周期", "data": "date"},
            {"sWidth": "100px", "title": "维修次数", "data": "repairCount"}
        ]
        var mainTable = $('#mainTable').winningTable({
            columns: columns,
            pageLength: 10,
            fixedHeader: false,
            searching: false,
            ordering: true,
            buttons: [

            ],
            "rowCallback": function (row, data, index) {
            }
        });
        $("#oneCode").bind("change", loadModel);
        $("#brandCode").bind("change", loadModel);
        function loadModel(initValue) {
            $.ajax({
                type: 'POST',
                data: {
                    datas: JSON.stringify({
                        oneCode: $("#oneCode").val(),
                        brandCode: $("#brandCode").val()
                    })
                },
                url: '${request.contextPath}/analysis/Trend/queryModel',
                success: function (data) {
                    //成功之后
                    $("#model").children().remove();
                    var optionDefault = $("<option value='0'>请选择</option>");
                    $("#model").append(optionDefault);
                    if (data.success) {
                        $(data.datas).each(function (index, item) {
                            var option = $("<option value='" + item.name + "-" + item.code + "'>" + item.name + "-" + item.code + "</option>");
                            $("#model").append(option);
                        })
                        $("#model").val(initValue);
                        $('#select2-model-container').html($("#model").find("option:selected").text());
                    }
                    else {
                        swal("错误", data.errorMsg, "error");
                    }
                },
                error: function (xhr, type) {
                    swal("错误", "系统发生内部错误!请稍后再试!", "error");
                }
            })
        }

        function refreshData() {
            var data = {
                    datas: JSON.stringify({
                        custPerson:$("#custPerson").val(),
                        oneCode: $("#oneCode").val(),
                        brandCode: $("#brandCode").val(),
                        model: $("#model").val(),
                        question: $("#question").val(),
                        compTableType: $("#compTableType").val(),
                        b_createTime: $("#startdate").val(),
                        e_createTime: $("#enddate").val()
                    })
            }
            mainTable.queryData("${request.contextPath}/analysis/Trend/queryTrendTable", data);
            drawChart();
        }
        refreshData();
        option = {
            xAxis: {
                type: 'category',
                name:'周期',
                data: []

            },
            tooltip: {
                trigger: 'axis'
            },
            yAxis: {
                type: 'value',
                name:'维修次数'
            },
            series: [{
                data: [],
                name:'维修次数',
                type: 'line'
            }]
        };

        function drawChart(){
            var params = {
                datas: JSON.stringify({
                    custPerson:$("#custPerson").val(),
                    oneCode: $("#oneCode").val(),
                    brandCode: $("#brandCode").val(),
                    model: $("#model").val(),
                    question: $("#question").val(),
                    compTableType: $("#compTableType").val(),
                    b_createTime: $("#startdate").val(),
                    e_createTime: $("#enddate").val()
                })
            }
            var dom = document.getElementById("drawChart");
            c1 = echarts.init(dom);
            var xAxis = [];
            var series2 = [];
            $.ajax({
                type: 'POST',
                url: '${request.contextPath}/analysis/Trend/queryTrendTable',
                data:params,
                success: function (data) {
                    if (data.success) {
                        var arr=data.datas;
                        for (var i = 0; i < arr.length; i++) {
                            xAxis.push(arr[i].date);
                            series2.push(arr[i].repairCount);
                        }
                        option.xAxis.data = xAxis;
                        option.series[0].data = series2;
                        c1.setOption(option, true);
                    } else {
                        swal("错误", data.errorMsg, "error");
                    }
                },
                error: function (xhr, type) {
                    swal("错误", "系统发生内部错误!请稍后再试!", "error");
                }
            });
        }
    </script>
</@layout.foot>
</body>
</html>